<template>
  <view>
    <view class="w100 mb-60" style="position: relative;">
      <image style="width: 100%; height: 350rpx;border-radius: 20rpx;position: absolute;top: 0;"
        :src="info.project_image_project_view_url" mode="widthFix"></image>
      <!-- <image style="width: 100%; height: 350rpx;border-radius: 20rpx;position: absolute;top: 0;" :src="`../../static/images/home/box${type}.png`" mode=""></image> -->
      <view class=" p-x-40 p-y-40" style="position: relative;">
        <view style="display: flex;align-items: center;margin-left: 60rpx;margin-top: 10rpx;">

          <view class="bots1 ">
            {{info.project_name}}
          </view>
        </view>
        <view class="" style="display: flex;align-items: center;">
          <view class="mt-50" style="margin-right: 40rpx;">
            <view class="s2">
              {{info.days}}天
            </view>
            <view class="s3 mt-30">
              产品周期
            </view>
          </view>
          <view class="mt-50" style="margin-right: 40rpx;">
            <view class="s2">
              {{info.project_price_ytc}}
            </view>
            <view class="s3 mt-30">
              产品金额
            </view>
          </view>
          <view class="mt-50">
            <view class="s2">
              {{info.days_interval}}
            </view>
            <view class="s3 mt-30">
              每天返利
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="gradientCard">
      <view class="  p-x-30 p-y-20  ">
        <view class="flex-b " style="font-size: 36rpx;font-weight: 400;color: #fff;">
          <view class="">
            {{info.project_name}}
          </view>
          <view class="">
            限购:{{info.buy_max_num}}台
          </view>
        </view>
        <view class="flex-b p-x-30">
          <view class="mt-50" style="margin-right: 40rpx; text-align: center;">
            <view class="s3">
              {{info.days_interval}}
            </view>
            <view class="s3 mt-30">
              预计日收益
            </view>
          </view>
          <view class="mt-50" style="margin-right: 40rpx;text-align: center;">
            <view class="s3">
              {{info.days}}天
            </view>
            <view class="s3 mt-30">
              设备周期
            </view>
          </view>
          <view class="mt-50" style="text-align: center;">
            <view class="s3">
              {{info.project_price_ytc}}
            </view>
            <view class="s3 mt-30">
              设备价格
            </view>
          </view>
        </view>
      </view>
    </view>


    <view style="font-size: 38rpx;font-weight: 700;color: #fff;" class="mt-30 mb-30">
      设备详情:
    </view>
    <view class="s3" style="color: #fff;">
      <u-parse :content="info.content_value"></u-parse>

    </view>
    <view style="display: flex;" class="mt-30">
      <image @click="tag=true" v-if="!tag" style="width: 36rpx;height: 36rpx;margin-right: 10rpx;"
        src="../../static/images/home/yues2.png" mode=""></image>
      <image @click="tag=false" v-if="tag" style="width: 36rpx;height: 36rpx;margin-right: 10rpx;"
        src="../../static/images/home/yes.png" mode="">
      </image>
      <view class="s3" style="width: 90%;font-size: 24rpx;">
        我已阅读并同意<text @click.stop="xieyi('购买协议')" style="color: #5D88BD;">《购买协议》</text><text style="color: #5D88BD;"
          @click.stop="xieyi('法律声明及隐私权政策')">《法律声明及隐私权政策》</text>我承诺接受并同意协议中的条款.申请后完成签字.
      </view>
    </view>
    <view class="busts flex-center mt-30" @click="qinazi  ">
      签字申请
    </view>
    <u-popup :show="show" mode="center" :customStyle="obj">
      <view style="width: 680rpx;" class="p-x-40 p-y-40 ">
        <view class="w100 flex-center  mb-20" style="font-size: 32rpx;font-weight: 500;color: #fff;">
          输入交易密码
        </view>
        <view class="flex-b mt-20" @click.stop="setDetault(index)" v-for="(item,index) in list" :key="index">
          <view style="display: flex;align-items: center;">
            <image style="width: 60rpx;height: 60rpx;" :src="item.utl" mode=""></image>
            <text class="fs-28 ml-20" style="color: #fff;">{{item.name}}</text>
          </view>
          <image v-if="cuttint==index" :src="yes" class="select-image"></image>
          <image v-else :src="not" class="select-image"></image>
        </view>


        <view class="mt-30 w100 p-x-15 p-y-15" style="border:2rpx solid #ccc;border-radius: 10rpx;">
          <u-input color='#fff' placeholder="请输入密码" border="none" v-model="value"></u-input>
        </view>
        <view class="flex-b mt-40">
          <view class="but1 flex-center" @click="show=false">
            取消
          </view>
          <view class="but2 flex-center" style="" @click="sumit">
            确定
          </view>
        </view>
      </view>
    </u-popup>
    <signature ref="signature" :show="signatureShow" @success="signatureSuccess" @cancel="signatureShow=false">
    </signature>
  </view>
</template>

<script>
  import signature from '../components/signature/signature.vue'
  export default {
    components: {
      signature
    },
    data() {
      return {
        tag: false,
        user_verfy_img: '',
        signatureShow: false,
        cuttint: 0,
        yes: '../../static/images/home/suss.png',
        not: '../../static/images/home/not.png',
        list: [{
            name: 'USDT支付',
            utl: '../../static/user/USDT.png'
          },
          {
            name: 'YTB支付',
            utl: '../../static/images/home/y.png'
          },

        ],
        info: {},
        id: '',
        type: 1,
        value: '',
        show: false,
        obj: {
          background: '#1E2240',
          border: " 2rpx solid #707070 ",
          borderImage: 'radial-gradient(#801FF0 50%, #FF2CDF 100%)14'
        }
      }
    },
    onLoad(e) {
      this.type = e.type
      this.id = e.id
      uni.setNavigationBarTitle({
        title: e.name
      })
      this.project_info()
    },
    methods: {
      qinazi() {
        if (!this.tag) {
          uni.showToast({
            title: '请阅读并同意协议',
            icon: 'none'
          })
          return
        }
        this.user_verfy_img = ''
        this.signatureShow = true
      },
      xieyi(name) {
        uni.navigateTo({
          url: '/pages/index/xieyi?name=' + name
        })
      },
      signatureSuccess(url) {
        this.user_verfy_img = url
        this.show = true
      },
      async sumit() {
        let res = await this.$http.post('user/add_project_log', {
          project_id: this.id,
          pay_type: this.cuttint + 1,
          pay_pass: this.value
        })
        if (res && res.code == 200) {
          this.show = false
          uni.showToast({
            title: '操作成功',
            icon: 'none'
          })
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/device/device'
            })
          }, 500)
        } else {
          uni.$u.toast('申请失败')
        }
      },
      setDetault(index) {
        this.cuttint = index
      },
      async project_info() {
        let res = await this.$http.get('user/get_project_info', {
          project_id: this.id
        })
        this.info = res.data
      },

    }
  }
</script>

<style>
  page {
    background-color: #1E2240;
    padding: 50rpx;
  }

  .select-image {
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
  }

  .but1 {
    width: 240rpx;
    height: 80rpx;
    background-color: #fff;
    border-radius: 8rpx;
    background: #EEEEEE;
    font-size: 30rpx;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
  }

  .but2 {
    width: 240rpx;
    height: 80rpx;
    border-radius: 8rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(266.84deg, #0014FF 0%, #801FF0 50%, #FF2CDF 100%);
  }

  .bots1 {
    font-size: 48rpx;
    font-weight: 400;
    color: #fff;
  }

  .s2 {
    font-size: 40rpx;
    font-weight: 400;
    color: #fff;
  }

  .s3 {
    font-size: 28rpx;
    font-weight: 400;
    color: #fff;
  }

  .busts {

    width: 100%;
    height: 80rpx;
    background: linear-gradient(266.84deg, #0014FF 0%, #801FF0 50%, #FF2CDF 100%);
    border-radius: 100rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #fff;
  }
</style>